@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

:root {
    --font-01: 'Kanit';
    --font-02: 'DM Sans'
  }


/* Font Styling */
.font-size-sm { font-size: 1.5em;}
.font-size-md { font-size: 2em;}
.font-size-lg { font-size: 3em;}

body, h3 { font-family: var(--font-02);}

.btn:focus { outline: none !important; box-shadow: none !important; }


/* Icon Styling */
.icons-are-blue svg { color:#17a2b8}

/* Utilities */
.cursor { cursor: pointer; transition: 0.5s all cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.cursor:hover { transform: scale(1.02,1.02); box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.351); transform: translateY(-5px);}
.app-swiper2.pull-up { margin-bottom: -300px;}
.co-header.pull-up { margin-bottom: -400px; }
.hideThis { display: none!important; }

/* Listing */ 
.filter-toolbar { min-height: 50px;}
.filter-toolbar select { border: #17a2b8 1px solid;}

/* Cards */ 
.card-size-control { width: 50rem; }

/* Overrides */
#content         { z-index: 10000; display: flex;}
.ly-content      { z-index: 1;}
.ly-content      { background-color: transparent !important; min-height: unset !important;}
.container-fluid { padding: 0px! important;}
header           { background-color: #052d47; padding:20px 0px; }

.logo-control    { position: absolute; top:-5px; width: 350px;}

.btn-primary { background-color: #40687d !important; border: 2px solid #fefefe42; 
    padding: 10px 20px; border-radius: 33px; box-shadow: 0px 0px 10px #3397c3; font-size: 1em; font-weight: bold; }
   
    .navbar li { background-color: white; border-radius: 20px;  margin-left: 20px;}
    .navbar .ly-nav-main li a { margin-left: 0px; padding: 8px 40px; font-weight: bold; font-size: 1.1em; text-decoration: none !important }
    .nav-item + .active { background-color: #00BCD4 !important; color:black; box-shadow: 0px 0px 10px #00BCD4; border: 1px solid #ffffff75; }
    .navbar .ly-nav-main li.active > a { text-decoration: none !important; color:rgb(123, 123, 123); border: 0px;}
    a { text-decoration: none !important;}
    .navbar .ly-nav-main li a:after { height: 0px; }

    /* Detail Page */
    .gallery-thumbnails-wrapper { display: flex; flex-wrap: wrap; padding: 15px; background-color: #f7f7f7; border-radius: 5px; margin-top: 20px; }
    .gallery-thumbnails         { width: 18.15%; height: 100px; margin: 6px; border-radius: 5px; }

    .linkItemExtras-title { background-color: white; display: inline; top: -17px; left: 27px; position: absolute; color: black; padding: 5px 29px; border-radius: 50px; border: 2px solid #123245; }
    .linkItemExtras-box   { background-color: #123245; padding: 15px; border-radius: 9px; padding-top: 35px; }
    .linkItemExtras-note  { color: #ffffff; font-weight: bold; background-color: #5db0b33d; padding: 6px 10px; border-radius: 4px; margin: 10px 0px; }
    .linkItemExtras-descr { color: #ffffff; border-bottom: 1px solid #80808045; padding: 5px 0px; }

   footer { background-color:  #072234; padding: 20px;}
   footer .container-fluid { background-color: transparent;}

   .app-swiper2 .swiper .swiper-slide p.lead { font-size: 2.0rem; color: #4eb9ff; text-shadow: 0px 0px 10px black; }

   .co-container-light * { color:white; text-shadow: 2px 2px 11px #0000009c;}

   #nav-mobile       { background-color: #191919;}
   .ly-header-mobile { background-color: #052d47 !important;}

   @media screen and (max-width: 480px) {

    header { height: 60px;}

    .logo-control { width: 200px; top:10px}

    /* Listing */

    .category-menu-control {    
    overflow: scroll;
    height: 68vh;
    position: absolute;
    top: 50px;
    z-index: 34;
    background-color: #3b3b3b;
    border-radius: 11px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0px 20px 17px #00000078;
    border: 3px solid white;}

    /* Cards */ 
   .card-size-control { width: unset; }
   .pull-up { margin-bottom: -75px !important; }

   /* Detail Page */
   .gallery-thumbnails-wrapper { padding: 0px; }
   .gallery-thumbnails { width: 29.25%; height: 75px; }

   /* .sc-content-block { margin: 268px 20px 10px 10px; } */
  }